<template>
	<!-- 记账 -->
	<view class="indexContent u-wrap">
		<view class="fixedTop">
			<jzStatusSelect v-model="selDate"></jzStatusSelect>
			<jz-search v-model="keyword"></jz-search>

			<!-- 统计 -->
			<view class="tongji">
				<view class="tj-box">
					<view class="label">支出:</view>
					{{ totalCost }}元
				</view>
				<view class="tj-box">
					<view class="label">收入:</view>
					{{ totalIcome }}元
				</view>
				<view class="tj-box">
					<view class="label">总计:</view>
					{{ totalProfit }}元
				</view>
			</view>
		</view>
		<view class="main-wrap">
			<scroll-view scroll-y @scrolltolower="reachBottom" style="height: 100%">
				<!-- 列表 -->
				<jz-list
					:itemList="showItemList"
					@editItem="editItem"
					@delItem="delItem"
				></jz-list>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
		<button class="addJz" @tap="addJz">
			<uni-icons type="plusempty" color="#fff" class="plus"></uni-icons>
		</button>
	</view>

	<!-- 新增/编辑 -->
	<jzEditJz ref="jzEdit" @confirm="editComfirm"></jzEditJz>
</template>

<script lang="ts" setup>
import jzSearch from "./components/jz-search.vue";
import jzList from "./components/jz-list.vue";
import jzStatusSelect from "./components/jz-statusSelect.vue";
import jzEditJz from "./components/jz-editJz.vue";
import BigNumber from "bignumber.js";
import { useListStore } from "@/store/modules/list";
const listStore = useListStore();
let queryPage = ref<PageQuery>({
	pageNo: 1,
	pageSize: 5
});
let keyword = ref("");
let selDate = ref<string[]>([]);
let itemList = storeToRefs(listStore).itemList;
let total = computed(() => itemList.value.length);
let loadingType = ref("more");
let totalCost = computed(() => {
	return itemList.value.reduce((pre, cur) => {
		return pre.plus(cur.cost);
	}, new BigNumber(0));
});
let totalIcome = computed(() => {
	return itemList.value.reduce((pre, cur) => {
		return pre.plus(cur.income);
	}, new BigNumber(0));
});
let totalProfit = computed(() => {
	return new BigNumber(totalIcome.value).minus(totalCost.value);
});

// 用于展示的list
const showItemList = computed(() => {
	let stratIndex = 0;
	let endIndex =
		(queryPage.value.pageNo * queryPage.value.pageSize > itemList.value.length
			? itemList.value.length
			: queryPage.value.pageNo * queryPage.value.pageSize) + 1;
	if (queryPage.value.pageNo * queryPage.value.pageSize > total.value) {
		loadingType.value = "noMore";
	} else {
		loadingType.value = "more";
	}
	return itemList.value.length > 0
		? itemList.value.slice(stratIndex, endIndex).filter((item) => {
				let filterType = true;
				// 时间
				if (selDate.value.length > 0) {
					let startDate = new Date(selDate.value[0] + " 00:00:00");
					let endDate = new Date(selDate.value[1] + " 23:59:59");
					let time = new Date(item.time);
					filterType = time <= endDate && time >= startDate;
				} else if (keyword.value) {
					// 关键字
					filterType = filterType && item.remark == keyword.value;
				}
				return filterType;
			})
		: [];
});

onPullDownRefresh(() => {
	queryPage.value.pageNo = 1;
	setTimeout(function () {
		wx.stopPullDownRefresh();
	}, 1000);
});
// const scrolltolower = () => {
// 	search();
// 	setTimeout(function () {
// 		wx.stopPullDownRefresh();
// 	}, 1000);
// };
// 触底
// onReachBottom(() => {
// 	if (queryPage.value.pageNo < total.value) {
// 		queryPage.value.pageNo++;
// 	}
// });

const reachBottom = () => {
	if (queryPage.value.pageNo * queryPage.value.pageSize < total.value) {
		loadingType.value = "loading";
		setTimeout(() => {
			queryPage.value.pageNo++;
		}, 1000);
	}
};

const jzEdit = ref();
let selItemIndex = ref(-1);
// 新增或者修改
const editComfirm = (item: ListItem) => {
	console.log(itemList.value);
	if (selItemIndex.value != -1) {
		itemList.value[
			selItemIndex.value +
				(queryPage.value.pageNo - 1) * queryPage.value.pageSize
		] = item;
	} else {
		console.log(itemList.value);
		itemList.value.push(item);
		console.log(itemList.value);
	}

	listStore.setItemList(itemList.value);
};
// 编辑
const editItem = (index: number) => {
	console.log(index);
	selItemIndex.value = index;
	jzEdit.value?.showPop(showItemList.value[index]);
};
// 删除
const delItem = (index: number) => {
	itemList.value.splice(
		index + (queryPage.value.pageNo - 1) * queryPage.value.pageSize,
		1
	);

	listStore.setItemList(itemList.value);
};
// 添加一条记录
const addJz = () => {
	selItemIndex.value = -1;
	jzEdit.value.showPop();
};
</script>
<style>
page {
	background-color: #f4f4f4;
}
</style>

<style scoped lang="scss">
.indexContent {
	/* #ifdef MP-WEIXIN */
	height: 100vh;
	/* #endif */
	/* #ifndef MP-WEIXIN */
	height: calc(
		100vh - 44px - env(safe-area-inset-top) - var(--tab-bar-height) - env(
				safe-area-inset-bottom
			)
	);
	/* #endif */

	overflow: hidden;
	.fixedTop {
		margin-bottom: 10rpx;
	}
	.tongji {
		display: flex;
		background-color: #fff;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		.tj-box {
			display: flex;
			margin-right: 20rpx;
			align-items: center;
			&:last-child {
				margin-right: 0;
			}
			.label {
				flex-shrink: 0;
			}
		}
	}
	.main-wrap {
		flex: 1;
		overflow: hidden;
	}
	.addJz {
		position: fixed;
		z-index: 999;
		bottom: 120rpx;
		right: 60rpx;
		background-color: $uni-color-primary;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.6;
		:deep(.uniui-plusempty) {
			font-size: 80rpx !important;
		}
	}
}
</style>
